<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        background: black url(images/game_bg_2_hd.jpg) no-repeat center center;
    }
    .bar{
       background: url(images/bottom-bar.png) no-repeat center 0;
       width: 100%;
       height: 72px;
       position: absolute;
       bottom: 0;
    }
   
    #jia{
        background: url(images/cannon_plus.png) no-repeat ;
        width: 44px;
        height: 31px;
        position: absolute;
        left: 800px;
        bottom: 0px;   
    }
    #jian{
        background: url(images/cannon_minus.png) no-repeat ;
        width: 44px;
        height: 31px;
        position: absolute;
        left: 600px;
        bottom: 0px;   
    }
    .num{
        background: url(images/number_black.png) no-repeat 0  -214px;
        width: 20px;
        height: 24px;
        position: absolute;
        bottom: 4px;  
    }
    #num1{
        left: 312px;
    }
    #num2{
        left: 336px;
    }
    #num3{
        left: 358px;
    }
    #num4{
        left: 380px;
    }
    #num5{
        left: 404px;
    }
    #num6{
        left: 426px;
    }
    #fashe{
        width: 74px;
        height: 85px;
        background: url(images/cannon1.png);
        position: absolute;
        bottom: 0;
        z-index: 1;
    }
    
</style>

<div id="fashe"></div>
<div id="wang"></div>
<div class="bar">
    <div id="jia"></div>
    <div id="jian"></div>
    <div class="num" id="num1"></div>
    <div class="num" id="num2"></div>
    <div class="num" id="num3"></div>
    <div class="num" id="num4"></div>
    <div class="num" id="num5"></div>
    <div class="num" id="num6"></div>
</div>

<script>
    function Fish(x,y,pic,w,h,count,time){
        var e = this.e = document.createElement("div");
        var t = this;
        e.onclick = function(){
            flag = true;
            t.xiaoshi();
        }
        var s = this.s = e.style;
        this.x = x;
        this.y = y;
        this.pic = pic;
        this.w = w;
        this.h = h;
        this.count = count;
        this.time = time;
        s.background = "url("+pic+")";
        s.width = w;
        s.height = h/count;
        s.position = "absolute";
        s.left = x;
        s.top = y;
        this.bgy = 0;
        document.body.appendChild(e); 
    }
    Fish.prototype.xiaoshi = function(){
        this.bgy = -parseInt(this.s.height)*this.count/2;
        var tt = this;
        var timer = setInterval(function(){
            tt.bgy = tt.bgy - parseInt(tt.s.height);
            if(tt.bgy==-parseInt(tt.s.height)*tt.count){
                clearInterval(timer);
            }
            tt.s.background = "url("+tt.pic+") 0 "+tt.bgy+"px";
        },500)
        setTimeout(function(){
            document.body.removeChild(tt.e);
        },1000)
    }

    var fishs = [];
    window.onload = function(){
        var ww = document.body.clientWidth;
        var wh = document.body.clientHeight;
        function createFish(){
        for(var i=0;i<30;i++){
        var f = new Fish(-i*50-50,Math.random()*600,"images/fish1.png",55,296,8,20);
        fishs.push(f);
        }
    }
    createFish();

    var i=0;
    var timer = setInterval(function(){
        i++;
        if(i==100) i=0;
        drawFish();
    },1000/60)

    function drawFish(){
        for(var j=0;j<fishs.length;j++){
            var f = fishs[j];
           
            if(i%f.time==0){
                f.bgy = f.bgy - parseInt(f.s.height);
                if(f.bgy==-parseInt(f.s.height)*f.count/2){
                    f.bgy = 0;
                }
                f.s.background = "url("+f.pic+") 0 "+f.bgy+"px";
                f.s.left = parseInt(f.s.left) + 10;
            }
            if(parseInt(f.s.left)>ww){
                fishs.splice(fishs.indexOf(f),1);
                document.body.removeChild(f.e);
                delete f;
                console.log(fishs);
            }
            if(fishs.length<15){
                createFish();
            }
        }
    }
    }

    var i = 1;
    var wang;
    var xuhao;
    jia.onclick = function(){
        i++;
        if(i==8){
            i=1;
        }  
        fashe.style.background = "url(images/cannon"+i+".png)"; 
    }
    jian.onclick = function(){
        i--;
        if(i==0){
            i=7;
        }  
        fashe.style.background = "url(images/cannon"+i+".png)";      
    }

    var ww = document.body.clientWidth;
    var wh = document.body.clientHeight;
    fashe.style.left = ww/2 + 10;
    var ny = -216;
    document.onclick = function(e){
        if(e.target==jia||e.target==jian){
            return;
        }
        var xx = e.pageX;
        var yy = e.pageY;
        var a = xx - parseInt(fashe.style.left);
        var b = wh - yy;
        var deg = Math.atan(a/b)*180/Math.PI;
        fashe.style.transform = "rotate("+deg+"deg)"; 

        var bullet = document.createElement("img");
        bullet.src="images/bullet"+i+".png";
        bullet.style.transform = "rotate("+deg+"deg)";
        bullet.style.position = "absolute";
        bullet.style.left = ww/2 - 24/2 +46; 
        bullet.style.bottom = 60;
        document.body.appendChild(bullet);
        var bs = 10;
        var timer = setInterval(function(){
            if(xx>ww/2){
                bullet.style.left = parseInt(bullet.style.left) + bs;
                bullet.style.bottom = parseInt(bullet.style.bottom) + bs*b/a;
                if(parseInt(bullet.style.left)>xx){
                    document.body.removeChild(bullet);
                    clearInterval(timer);
                }
            }
           if(xx==ww/2){
                bullet.style.bottom = parseInt(bullet.style.bottom) + bs;
                if(parseInt(bullet.style.bottom)>wh-xx){
                    document.body.removeChild(bullet);
                    clearInterval(timer);
                }
           }
            if(xx<ww/2){
                bullet.style.left = parseInt(bullet.style.left) - bs-2;
                bullet.style.bottom = parseInt(bullet.style.bottom) + bs*-b/a;
                if(parseInt(bullet.style.left)<xx+10){
                    document.body.removeChild(bullet);
                    clearInterval(timer);
                }
            }          
        },16)

        if(flag){ 
            setTimeout(function(){
                wang = document.createElement("img");
                wang.src = "images/web"+i+".png";
                wang.style.position = "absolute";
                wang.style.left = xx - 60;
                wang.style.top = yy - 60;
                document.body.appendChild(wang);
                setTimeout(function(){
                    document.body.removeChild(wang);
                },300)
                var music = new Audio();
                music.src = "c (1).wav";
                music.play();
                var my = 0;
                var s = 0;
                setInterval(function(){
                    var money = document.createElement("div");
                    money.style.background = "url(images/coinAni2.png) 0 "+my+"px";
                    my = my - 60;
                    money.style.width = 60;
                    money.style.height = 60;
                    money.style.position = "absolute";
                    money.style.left = xx-s;
                    money.style.top = yy+s;
                    s = s + 60;
                    money.style["z-index"] = 2;
                    document.body.appendChild(money);
                    setTimeout(function(){
                        document.body.removeChild(money);
                    },100)
                },200)

                var cheng = document.createElement("div");
                cheng.style.width = 36;
                cheng.style.height = 49;
                cheng.style.background = "url(images/coinText.png) -360px 0";
                cheng.style.position = "absolute";
                cheng.style.left = xx +40;
                cheng.style.top = yy +40;
                document.body.appendChild(cheng);
        
                var core = document.createElement("div");
                core.style.width = 36;
                core.style.height = 49;
                core.style.background = "url(images/coinText.png) -36px 0";
                core.style.position = "absolute";
                core.style.left = xx +40 +40;
                core.style.top = yy +40;
                document.body.appendChild(core);
                setTimeout(function(){
                    document.body.removeChild(core);
                    document.body.removeChild(cheng);
                },500)
            },600)
            
            ny = ny +24;
            if(ny==24){
                ny=-216; 
            }   
            num6.style.background = "url(images/number_black.png) no-repeat 0  "+ny+"px";            
        }       
    }
</script>



